<template>
	<view class="container">
		<!-- 自定义顶部导航栏 -->
		<view class="custom-app-bar-wrapper" :style="{ height: `calc(100rpx + ${statusBarHeight}px)` }">
			<view class="custom-app-bar" :style="{ top: statusBarHeight + 'px' }">
				<u-icon name="arrow-left" size="40" class="back-icon" @click="goBack"></u-icon>
				<text class="title">我的计划</text>
				<u-icon name="plus" size="40" class="add-icon" @click="createPlan"></u-icon>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content" :style="{ paddingTop: `calc(100rpx + ${statusBarHeight}px)` }">
			<!-- 计划列表 -->
			<view class="plan-list" v-if="planList.length > 0">
				<view
					class="plan-item"
					v-for="item in planList"
					:key="item.id"
					@click="goToDetail(item.id)"
				>
					<view class="plan-header">
						<view class="plan-type">
							<text class="type-tag">{{ item.planType === 1 ? '绘本集计划' : '自定义计划' }}</text>
						</view>
						<view class="plan-time">
							<text class="create-time">{{ formatTime(item.createTime) }}</text>
						</view>
					</view>
					<view class="plan-content">
						<view class="plan-stats">
							<view class="stat-item">
								<text class="stat-label">每天学习</text>
								<text class="stat-value">{{ item.learnAFewNewThingsEveryDay }}个</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">复习次数</text>
								<text class="stat-value">{{ item.reviewFrequency }}次</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">计划天数</text>
								<text class="stat-value">{{ item.plannedDays || 0 }}天</text>
							</view>
						</view>
					</view>
					<view class="plan-footer">
						<u-icon name="arrow-right" size="24" color="#c8c9cc"></u-icon>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="planList.length === 0 && !loading">
				<image src="/static/empty.png" class="empty-image"></image>
				<text class="empty-text">暂无计划</text>
				<u-button type="primary" size="medium" shape="circle" @click="createPlan" class="create-btn">
					创建第一个计划
				</u-button>
			</view>

			<!-- 加载状态 -->
			<view class="loading-state" v-if="loading">
				<u-loading mode="flower"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as BookRecordApi from '@/api/bookRecord'

	export default {
		data() {
			return {
        type: '',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				planList: [],
				loading: false
			};
		},
		onLoad(options) {
      this.type = options.type || ''; // 获取type参数，如果没有则默认为空
			this.getPlanList();
		},
		onShow() {
			// 页面显示时刷新列表
			this.getPlanList();
		},
		methods: {
			// 获取计划列表
			async getPlanList() {
				this.loading = true;
				try {
					const response = await BookRecordApi.getBookReadingProgramList(this.type);
					if (response.code === 0) {
						this.planList = response.data.list || response.data || [];
					} else {
						this.$toast(response.msg || '获取计划列表失败');
					}
				} catch (error) {
					console.error('获取计划列表失败:', error);
					this.$toast('获取计划列表失败');
				} finally {
					this.loading = false;
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 创建计划
			createPlan() {
				uni.navigateTo({
					url: '/pages/plan/create'
				});
			},

			// 跳转到计划详情
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/plan/detail?id=' + id
				});
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const now = new Date();
				const diff = now.getTime() - date.getTime();
				const days = Math.floor(diff / (1000 * 60 * 60 * 24));

				if (days === 0) {
					return '今天';
				} else if (days === 1) {
					return '昨天';
				} else if (days < 7) {
					return `${days}天前`;
				} else {
					return `${date.getMonth() + 1}月${date.getDate()}日`;
				}
			}
		}
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f7f7f7;
	}

	.custom-app-bar-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}

	.custom-app-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.add-icon {
		position: absolute;
		right: 20rpx;
		color: #007aff;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
	}

	.plan-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.plan-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		position: relative;
	}

	.plan-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.plan-type {
		flex: 1;
	}

	.type-tag {
		padding: 8rpx 16rpx;
		background-color: #e8f4fd;
		color: #1890ff;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.plan-time {
		flex-shrink: 0;
	}

	.create-time {
		font-size: 24rpx;
		color: #999;
	}

	.plan-content {
		margin-bottom: 20rpx;
	}

	.plan-stats {
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.stat-value {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.plan-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.create-btn {
		width: 300rpx;
	}

	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}
</style>
